<template>
  <div class="create-order">
    <Header title="生成订单" />
    <van-contact-card type="edit"
                      :tel="tel"
                      :name="name"
                      @click="onEdit" />
    <div class="content">
      <div v-for="(item,index) in store.state.orderList">
        <van-card :num="item.num"
                  :price="item.print"
                  :title="item.title"
                  :thumb="item.pic" />
      </div>
    </div>
    <div class="pay-wrap">
      <div class="price">
        <span>
          商品金额
        </span>
        <span>
          ￥{{totalPrice}}
        </span>
      </div>
      <van-button type="primary"
       class="pay-btn" block
        color="#ffc400"
        @click="handleCreateOrder">生成订单</van-button>
    </div>
  </div>
</template>

<script setup>
import Header from '@/components/Header.vue'
import { ref, toRefs, reactive, onMounted } from 'vue'
import { showToast,showDialog } from 'vant'
import { useStore } from 'vuex'
import { useRouter,useRoute } from "vue-router"
const router=useRouter()
const route=useRoute()
const store = useStore()
const data = reactive({
  tel: '13236563210',
  name: '程林海',
  totalPrice:0
})
const { tel, name,totalPrice } = toRefs(data)
const onEdit = () => {
  router.push('address')
}
const initPrice=()=>{
  let price=0
  if(store.state.orderList.length){
    store.state.orderList.forEach((item)=>{
      price+=item.num*item.price
    })
  }
  data.totalPrice=price
}
const initUser=()=>{
  store.state.userAddress.forEach(item=>{
    if (item.isDefault) {
      data.name=item.name
      data.tel=item.tel
    }
  })
}
const handleCreateOrder=()=>{
  showDialog({
  title: '提示',
  message: '生成订单成功',
}).then(() => {
  let newList=store.state.cartList.filter(item=>{
    return !route.query.list.includes(item.id+'')
  })
  store.commit('dalete',newList)
  store.commit('orderListEd')

  router.push('/order')
});
}
onMounted(()=>{
initPrice()
initUser()
})
</script>
<style lang="less" scoped>
.create-order {
  display: flex;
  flex-flow: column;
  height: 100%;
  .content {
    flex: 1;
    overflow-y: auto;
  }
  .pay-wrap {
    padding: 10px 0;
    width: 100%;
    background: #fff;
    border-top: 1px solid #e9e9e9;
    > div {
      display: flex;
      justify-content: space-between;
      padding: 0 5%;
      margin: 10px 0;
      font-size: 14px;
      span:nth-child(2) {
        color: red;
        font-size: 18px;
      }
    }
    .pay-btn {
      width: 90%;
      margin: 0 auto;
    }
  }
}
</style>